<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入cesiumjs库 -->
    <script src="../lib/cesium/Cesium.js"></script>
    <title>加载tileset</title>
</head>
<style>
    /* 引入cesium widget样式 */
    @import url(../lib/cesium/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>

<body>
    <!-- 地图容器 -->
    <div id="cesiumContainer"></div>
    <script src="app.js"></script>
</body>
<script>
    let viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false, // 搜地理位置搜索工
        homeButton: false, // 返回首页按钮
        sceneModePicker: false, // 2D 3D切换按钮
        baseLayerPicker: false, // 底图切换按钮
        navigationHelpButton: false, // 帮助按钮
        animation: false, // 左下角动画面板
        timeline: false, // 时间轴
        fullscreenButton: false, // 全屏按钮
    });
    // 隐藏logo
    viewer.cesiumWidget.creditContainer.style.display = "none";
    //   第一步： https://cesium.com/ion/ 打开此网站注册一个用户
    // 第二步： 点击"Access Token"，跳转到Access Tokens page页面。
    // 第三步： 拷贝token
    // 第四步：token赋值
    Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiN2ZlMWExNC04NjRlLTQzMTQtYmI2MS03M2NiN2Q0MjAwYTciLCJpZCI6ODYzNjIsImlhdCI6MTY0Nzc1NjgxNX0.UB9DEHTYlzJ-1N1XF8rH7uGEsw8W5nlMZuz-LTVizb8';
    //   可参考： https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

    // viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
    // viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));

    try {
        const tileset = Cesium.Cesium3DTileset.fromUrl(
            "../tileset/tileset.json"
        );
        viewer.scene.primitives.add(tileset);
        tileset.then((tileset) => {
                viewer.zoomTo(
                tileset,
                // new Cesium.HeadingPitchRange(
                //     0.5,
                //     -0.2,
                //     tileset.boundingSphere.radius * 4.0
                // )
            );
        })
       

        
        } catch (error) {
        console.error(`Error creating tileset: ${error}`);
        }
    // var tileset = viewer.scene.primitives.add(
    //     new Cesium.Cesium3DTileset({
    //         url: '../tileset/tileset.json',
    //     })
    // );
    // tileset.readyPromise.then(function (tileset) {
    //         viewer.zoomTo(
    //             tileset,
    //             new Cesium.HeadingPitchRange(
    //                 0.5,
    //                 -0.2,
    //                 tileset.boundingSphere.radius * 4.0
    //             )
    //         );
    //     })
    //     .otherwise(function (error) {
    //         console.log(error);
    //     });
</script>

</html>